﻿<!-- jsp文件头和头部 -->
<!DOCTYPE html>
<html lang="en" style="background:#fff;">
<head>
    <base href="${basePath}">
	<#include "common/top.html" />
	<link type="text/css" rel="stylesheet" href="${basePath}plugins/zTree/3.5.1/zTreeStyle/zTreeStyle.css"/>
	<script type="text/javascript" src="${basePath}plugins/zTree/3.5.1/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="${basePath}plugins/zTree/3.5.1/jquery.ztree.excheck.js"></script>
	<style>
		.layui-form-item .layui-input-inline {
			float: left;
			width: 250px;
			margin-right: 10px;
		}
	</style>
</head>
	<body style="background:#fff;">

<br>
	<div class="layui-elem-field" style="overflow: auto;width: 35%;float: left;height: 400px;margin-left: 16px;">
		<ul id="tree" class="ztree"></ul>
	</div>
	<form class="layui-form layui-form-pamel" modelAttribute="menu" name="form1" id="form1"  method="post" style="float: left;">
		<div class="">
			<input type="hidden" name="menuId" id="menuId" value="${sysMenu.menuId}"/>
			<input type="hidden" name="appId" id="appId" value="${sysMenu.appId}"/>

			<div class="layui-form-item layui-form-item-dialog-menu">
				<label class="layui-form-label"><span style="color: red;">*</span>名称：</label>
				<div class="layui-input-inline">
					<input class="layui-input" type="text" name="menuName" maxlength="50" id="menuName" placeholder="请输入名称" value="${sysMenu.menuName}"  title="名称"/>
				</div>
			</div>
			<div class="layui-form-item layui-form-item-dialog-menu">
				<label class="layui-form-label">上级：</label>
				<div class="layui-input-inline">
					<input class="layui-input" type="text" readonly name="parentName" id="parentName" placeholder="请选择" value="${sysMenu.parentName}"  title="上级"/>
					<input class="layui-input" type="hidden" name="parentId" id="parentId" placeholder="这里输入名称" value="${sysMenu.parentId}"  title="名称"/>
				</div>
			</div>
			<div class="layui-form-item layui-form-item-dialog-menu">
				<label class="layui-form-label"><span style="color: red;">*</span>权限编码：</label>
				<div class="layui-input-inline">
					<input class="layui-input" type="text" name="permission" maxlength="50" id="permission" placeholder="请输入权限编码" value="${sysMenu.permission}"  title="权限"/>
				</div>
			</div>

			<div class="layui-form-item layui-form-item-dialog-menu">
				<label class="layui-form-label">url：</label>
				<div class="layui-input-inline">
					<input class="layui-input" type="text" name="menuUrl" maxlength="100" id="menuUrl" placeholder="请输入URL" value="${sysMenu.menuUrl}"  title="url"/>
				</div>
			</div>
			<div class="layui-form-item layui-form-item-dialog-menu">
				<label class="layui-form-label">层级：</label>
				<div class="layui-input-inline">
					<input class="layui-input" readonly type="text" name="leveled" id="leveled" placeholder="请输入层级" value="${sysMenu.leveled}"  title="层级"/>
				</div>
			</div>
			<div class="layui-form-item layui-form-item-dialog-menu">
				<label class="layui-form-label">类型：</label>
				<div class="layui-input-inline">
					<select id="menuType" name="menuType" lay-filter="menuType">
						<option value="">请选择</option>
						<option value="URL">URL</option>
						<option value="BUTTON">BUTTON</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item layui-form-item-dialog-menu">
				<label class="layui-form-label">接入模式：</label>
				<div class="layui-input-inline">
					<select id="accessMode" name="accessMode" lay-filter="accessMode">
						<option value="">请选择</option>
						<option value="iframe">iframe</option>
						<option value="ajaxload">ajaxload</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item layui-form-item-dialog-menu">
				<label class="layui-form-label">备注：</label>
				<div class="layui-input-inline">
					<input class="layui-input" type="text" name="remarks" maxlength="200"id="remarks" placeholder="请输入备注" value="${sysMenu.remarks}"  title="备注"/>
				</div>
			</div>

            <div class="layui-form-item layui-form-item-dialog-menu">
                <label class="layui-form-label">图标：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" name="menuIcon" maxlength="200"id="menuIcon" placeholder="请输入图标" value="${sysMenu.menuIcon}"  title="备注"/>
                </div>
            </div>
			<div class="layui-form-item layui-form-item-dialog">
				<label class="layui-form-label">类型：</label>
				<div class="layui-input-inline">
					<select id="status" name="status" lay-filter="status">
						<option value="Y">启用</option>
						<option value="N">关闭</option>
					</select>
				</div>
			</div>
		</div>
	</form>
	<script type="text/javascript">
        var zTree;
		var $form;
		var form;
        var zn = '${zTreeNodes}';
        var setting = {
            data: {
                key: {
                    title: "dept"
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            callback:{
                onClick: zTreeOnClick
            }
        };
		layui.use(['form'], function () {
			form = layui.form;
			$form = $('form');
			$("#menuType  option").each(function(){
				if($(this).val() == "${sysMenu.menuType}") {
					$(this).attr("selected",true)
				}
			});
            $("#accessMode  option").each(function(){
                if($(this).val() == "${sysMenu.accessMode}") {
                    $(this).attr("selected",true)
                }
            });
            $("#status  option").each(function(){
                if($(this).val() == "${sysMenu.status}") {
                    $(this).attr("selected",true)
                }
            });
            apps();
            $("#apps  option").each(function(){
                if($(this).val() == "${sysMenu.appId}") {
                    $(this).attr("selected",true)
                }
            });
            form.on('select(apps)',function (data) {
                var st = data.value;
                var split = st.split('|');
                $("#appId").val(split[0])
                $("#menuUrl").val(split[1])
                $.ajax({ url: "${basePath}system/menu/getMenuByAppId",
                    data: {appId:split[0]},
                    type: "POST",
                    success: function(data){
                        if (data.status ==true) {
                            var zNodes = eval(data.t);
                            zTree = $.fn.zTree.init($("#tree"), setting, zNodes);
                        }else{
                            parent.layer.alert(data.msg);
                        }
                    }
                })
            })
            getMenuAll();

            function getMenuAll() {

                $.ajax({ url: "${basePath}system/menu/getMenuAll",
                    data: {},
                    type: "POST",
                    success: function(data){
                        if (data.status ==true) {
                            var zNodes = eval(data.t);
                            zTree = $.fn.zTree.init($("#tree"), setting, zNodes);
                        }else{
                            parent.layer.alert(data.msg);
                        }
                    }
                })
            }
            form.render();
		});
        function apps() {
            $.ajax({ url: "${basePath}system/app/getSysAppAll",
                type: "POST",
                success: function(data){
                    if (data.status ==true) {
                        var apps = data.t;

                        $("#apps").empty();
                        $("#apps").append('<option value="">请选择</option>');
                        for (var i = 0;i < apps.length;i++){
                            $("#apps").append('<option value="'+apps[i].appId+'|'+apps[i].appUrl+'">'+apps[i].appName+'</option>')
                        }
                        form.render();
                    }
                }
            })
        }


		$(document).ready(function(){
		});
		function zTreeOnClick(event, treeId, treeNode) {
			$("#parentId").val(treeNode.id);
			$("#parentName").val(treeNode.name);
			$("#leveled").val(treeNode.level+1);
		};
		//保存
		function save(){
			if(checkIsNull("menuName","名称不能为空") || checkIsNull("permission","权限不能为空")){
				return false;
			}
			$.ajax({ url: "${basePath}system/menu/saveUpdateSysMenu",
				data: $("#form1").serialize(),
				type: "POST",
				success: function(data){
					if (data.status ==true) {
                        layer.alert(data.msg,function(index){
                            var index1 = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index1);
                            layer.close(index);
                        });
					}else{
						parent.layer.alert(data.msg);
					}
				}
			})
		}
	</script>
</body>
</html>


